<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			ul {
				width: 100%;
				box-sizing: border-box;
				overflow: hidden;
				
			}
			li{
				float: left;
			}
			
			img {
				width: 230px;
				display: block;
			}
		</style>
	</head>

	<body>
		<ul>
		</ul>
		<script>
			var ul = document.querySelector("ul")
			var perImgW = 230;
				var clientW = document.documentElement.clientWidth
				var cols;
				var gap;
					cols = parseInt(clientW / perImgW)-1
					gap = clientW % perImgW+perImgW
				var padding = Math.floor(gap*0.9 / (1 + cols))
				ul.style.paddingLeft = padding+"px"
				for(var i = 0; i < cols; i++) {
					var newLi = document.createElement("li")
					newLi.style.width = perImgW+"px"
					newLi.style.marginRight = padding+"px"
					ul.appendChild(newLi)
				}
				var arr = [{
						"src": "../img/1.jpg",
						"alt": "1",
						"height": "343px"
					},
					{
						"src": "../img/2.jpg",
						"alt": "2",
						"height": "300px"
					},
					{
						"src": "../img/3.jpg",
						"alt": "3",
						"height": "230px"
					},
					{
						"src": "../img/4.jpg",
						"alt": "4",
						"height": "230px"
					},
					{
						"src": "../img/5.jpg",
						"alt": "5",
						"height": "306px"
					},
					{
						"src": "../img/6.jpg",
						"alt": "6",
						"height": "333px"
					},
					{
						"src": "../img/7.jpg",
						"alt": "7",
						"height": "335px"
					},
					{
						"src": "../img/8.jpg",
						"alt": "8",
						"height": "172px"
					},
					{
						"src": "../img/9.jpg",
						"alt": "9",
						"height": "172px"
					},
					{
						"src": "../img/10.jpg",
						"alt": "10",
						"height": "345px"
					},
					{
						"src": "../img/11.jpg",
						"alt": "11",
						"height": "340px"
					},
					{
						"src": "../img/12.jpg",
						"alt": "12",
						"height": "153px"
					},
					{
						"src": "../img/13.jpg",
						"alt": "13",
						"height": "345px"
					},
					{
						"src": "../img/14.jpg",
						"alt": "14",
						"height": "316px"
					},
					{
						"src": "../img/15.jpg",
						"alt": "15",
						"height": "327px"
					},
					{
						"src": "../img/16.jpg",
						"alt": "16",
						"height": "345px"
					},
					{
						"src": "../img/17.jpg",
						"alt": "17",
						"height": "172px"
					},
					{
						"src": "../img/18.jpg",
						"alt": "18",
						"height": "282px"
					},
					{
						"src": "../img/19.jpg",
						"alt": "19",
						"height": "224px"
					},
					{
						"src": "../img/20.jpg",
						"alt": "20",
						"height": "344px"
					}
				];
				var aLi = document.getElementsByTagName('li'); 
				console.log(aLi)

				function getMinLi(aLi) { 
					var minIndex = 0; 
					var minValue = aLi[minIndex].offsetHeight; 
					for(var i = 0; i < aLi.length; i++) {
						if(aLi[i].offsetHeight < minValue) {
							minValue = aLi[i].offsetHeight;
							minIndex = i;
						}
					}
					return minIndex;
				}
				createImg();

				function createImg() { 
					for(var i = 0; i < arr.length; i++) {
						var cdiv = document.createElement('div');
						var cimg = document.createElement('img');
						cimg.src = arr[i].src;
						cimg.style.height = arr[i].height;
						cdiv.style.marginBottom = 10+"px";
						cdiv.appendChild(cimg);
						aLi[getMinLi(aLi)].appendChild(cdiv); 
					}
				}

				window.onscroll = function() { 
					var ch = document.documentElement.clientHeight; 
					var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; 
					var minheight = aLi[getMinLi(aLi)].offsetHeight; 
					if(minheight < ch + scrolltop) {
						createImg();
					}
				}
		</script>
	</body>

</html>